<template>
  <div id="centerLeft">
    <div class="left-content01">
      <div class="content01-hander" @click="flow">
        用户分析
      </div>
      <div class="content01-item">
        <div class="item-left">
          <VisitorEcharts></VisitorEcharts>
        </div>
        <div class="item-right">
          <TpEcharts></TpEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VisitorEcharts from "./VisitorEcharts.vue";
import TpEcharts from "./TpEcharts.vue";
export default {
  data() {
    return {
    }
  },
  components: {
    TpEcharts,
    VisitorEcharts
  },
  created() {
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
$box-width: 572px;
$box-height: 317px;

#centerLeft {
  height: $box-height;
  width: $box-width;

  .left-content01 {
    width: 100%;
    height: 100%;
    background-image: url("/public/imgs/LeftThree.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .content01-item {
    display: flex;
    padding-left: 20px;
    .item-left{ 
      width: 300px;
      height: 250px;

    }
    .item-right{
      width: 200px;
      height: 250px;
    }
  }
  .content01-hander {
    background: linear-gradient(to bottom, #FFFFFF, #97CDFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    height: 56px;
    font-family: Adobe Heiti Std;
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    color: #fff;
    padding-left: 60px;
    line-height: 40px;
  }


}
</style>
